<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.word" placeholder="单词" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.userName" placeholder="提交人" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <!-- <el-input v-model="listQuery.subjectId" placeholder="题目ID" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" /> -->
      <el-select v-model="listQuery.isDeal" placeholder="状态" clearable class="filter-item" style="width: 130px" @change="handleFilter">
        <el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-date-picker
        v-model="qdate"
        type="daterange"
        align="right"
        style="margin-bottom: 10px;vertical-align: middle;"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      />
      <!-- <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select> -->
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" type="danger" icon="el-icon-delete" @click="handleBtnDelete">
        删除
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      :stripe="true"
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="30" />
      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="60">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单词" min-width="50px">
        <template slot-scope="{row}">
          <span>{{ row.word  }}</span>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" prop="add_time" sortable="custom" width="140px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.addTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交人" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交人ID" width="80px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.uid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="反馈内容" min-width="150px">
        <template slot-scope="{row}">
          <span>{{ row.errorContent }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理人" min-width="50px">
        <template slot-scope="{row}">
          <span>{{ row.dealName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="95">
        <template slot-scope="{row}">
          <el-tag :type="row.isDeal == 1 ? 'success': 'danger'">
            {{ row.isDeal == 0 ? '待处理': '已处理' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="解决时间" prop="add_time" sortable="custom" width="140px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.dealTime == null ? "" : scope.row.dealTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="{row}">

          <el-button v-if="row.isDeal == 0" type="primary" size="small" icon="el-icon-edit" @click="handleDeal(row)">
            解决
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(row, -1)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页插件 -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getList" />

  </div>
</template>

<script>
import { fetchList, dealBatch, del} from '@/api/word/correction'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'ComplexTable',
  components: { Pagination },
  filters: {},
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 20,
        sort: 'add_time',
        order: 'desc'
      },
      temp: {
        id: undefined
      },
      dialogFormVisible: false,
      imgDialogFormVisible: false,
      prevImage: '',
      handleLoading: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      qdate: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      statusOptions: [{ key: 0, label: '待处理' }, { key: 1, label: '已处理' }],
      multipleSelection: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      if (this.qdate && this.qdate.length === 2) {
        this.listQuery.qssj = this.qdate[0]
        this.listQuery.jzsj = this.qdate[1]
      } else {
        this.listQuery.qssj = this.listQuery.jzsj = null
      }
      fetchList(this.listQuery).then(response => {
        this.list = response.data.list
        console.log(this.list)
        this.total = response.data.total
        this.listLoading = false
      }).catch(e => {
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.listQuery.size = 10
      this.getList()
    },
    handleDelete(row, status) {
      this.$confirm('确定要删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        del(row.id).then(response => {
          this.listLoading = false
          this.getList()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        }).catch(e => {
          this.listLoading = false
          this.$message.error('操作失败，请稍后重试')
        })
      })
    },
    handleBtnDelete() {
      console.log(this.multipleSelection.length)
      const tempSelection = this.multipleSelection
      if (tempSelection.length <= 0) {
        return this.$message.error('请先选择要删除的行')
      }
      // const tempTableData = this.list
      // for (const i of tempSelection) {
      //   tempTableData.splice(tempTableData.findIndex(item => item.id === i), 1)
      // }
      // this.list = tempTableData
      this.$confirm('确定要进行批量删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        const data = {
          id: tempSelection
        }
        delBatch(data).then(response => {
          this.listLoading = false
          this.getList()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        }).catch(e => {
          this.listLoading = false
          this.$message.error('操作失败，请稍后重试')
        })
      })
    },
    // 复选框选中
    handleSelectionChange(val) {
      console.log('插入数据 => ' + val)
      this.multipleSelection = []
      for (const item of val) {
        this.multipleSelection.push(item.id)
      }
    },
    prevImg($event) {
      this.prevImage = $event.currentTarget.src
      this.imgDialogFormVisible = true
    },
    // 处理回复 start
    resetTemp() {
      this.temp = {
        id: undefined,
        sort: 0
      }
    },
    handleDeal(row) {
      this.$confirm('确定已经解决了此问题吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        const data = {
          id: row.id
        }
        dealBatch(data).then(response => {
          this.listLoading = false
          this.getList()
          this.$notify({
            title: '成功',
            message: '解决成功',
            type: 'success',
            duration: 2000
          })
        }).catch(e => {
          this.listLoading = false
          this.$message.error('操作失败，请稍后重试')
        })
      })
    },
    handleReply() {
      if (!this.temp.reply) {
        this.$message.error('请先填写回复内容')
        return
      }
      this.handleLoading = true
      const data = { id: this.temp.id, reply: this.temp.reply }
      reply(data).then(response => {
        this.handleLoading = false
        this.resetTemp()
        this.dialogFormVisible = false
        this.getList()
      }).catch(e => {
        this.handleLoading = false
        if (e === 'invalid_parameters') {
          this.$message.error('错了哦，请填写完整信息')
        } else {
          this.$message.error('错了哦，操作失败')
        }
        console.error(e)
      })
    },
    // 处理回复 end
    sortChange(data) {
      const { prop, order } = data
      if (order === 'ascending') {
        this.listQuery.order = 'asc'
      } else {
        this.listQuery.order = 'desc'
      }
      this.listQuery.sort = prop
      this.handleFilter()
    }
  }
}
</script>
<style>
.question_topic_tree_search{
  width: 200px;
  display: inline-block;
  margin-bottom: 10px;
  vertical-align: middle;
  line-height:35px
}
</style>

